<template>
  <div>
    <div class="demo-type">
      <div>
        <el-avatar :src='user_pic' icon="el-icon-user-solid" v-model="user_pic"></el-avatar>
      </div>
    </div>

    <label for="username">账号
      <el-input placeholder="请输入内容" v-model="username" clearable id="username"></el-input>
    </label>

    <label for="password">密码
      <el-input placeholder="请输入密码" v-model="password" show-password id="password"></el-input>
    </label>

    <el-button type="primary" @click ="login">登录</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username : '',
      password : '',

      user_pic : '',
    }
  },

  methods: {
    async login () {

      const res = await this.$http.post('/api/login',{
          username : this.username,
          password : this.password,
      },)

      if(res.data.status === 0){
        this.$cookie.set( "token" ,res.data.token, 1)
        // console.log(this.$cookie.get('token'));
        this.$message({
          message: '登录成功，欢迎回来 亲爱的用户'+this.username ,
          type: 'success'
        });
      }
      else{
        this.$message.error('用户名或密码错误，请重新检查输入信息是否正确')
      }
    },
  },

  watch: {
    // 实现通过实时监听 username 为用户提前匹配头像
    async username(newVal){
      // console.log(newVal)
      
      const res = await this.$http.post('/api/search',{
          username : newVal,
      },)
      if(res.data.status===0)
        this.user_pic = res.data.data
      else
        this.user_pic = ''
    }
  },
}
</script>


<style lang="less">

</style>
